<template>
    <div class="cinema-container">
        <div class="cinema">
            <h1>{{cinemaDetail.nm}}</h1>
            <span>{{cinemaDetail.addr}}</span>
        </div>

        <div class="film">
            <div class="movie-fliter"></div>
            <div class="img_bg" :style="{backgroundImage: `url(${picFix(filmList[filmIndex].img)})`}"></div>
            <div id="slider" class="mui-slider film">
                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll film-img">
                        <img :class="['mui-control-item',i === filmIndex ? 'mui-active':'']" v-for="(item,i) in filmList" :key="i"
                        @tap="getDetail(i)" :src="picFix(item.img)">
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="film">
            <div class="movie-fliter"></div>
            <div class="film-img">
                <img v-for="(item,i) in filmList" :key="i" :src="picFix(item.img)" @click="getDetail(i)">
            </div>
        </div> -->
        <div class="cinema-film" v-if="filmList[filmIndex]">
            <div class="film-info">
                <span class="film-name">
                    <span>{{filmList[filmIndex].nm}}</span>
                    <span>{{filmList[filmIndex].sc}}</span>分
                </span>
                <span class="film-desc">
                    {{filmList[filmIndex].desc}}
                </span>
            </div>
            <hr>
            <div class="cinema-show">

            </div>
        </div>

    </div>
</template>
<script>
import { Indicator } from 'mint-ui';
import mui from '../../lib/js/mui.min.js'
export default {
    data(){
        return{
            filmId:this.$route.params.fid,
            cinemaId:this.$route.params.cid,
            cinemaDetail:{},
            dealList:{},
            showData:{},
            filmList:{},
            filmIndex:0,
        }
    },
    created(){
        Indicator.open({
            text: 'Loading...',
            spinnerType: 'fading-circle'
        });
        this.getDetail(this.filmId)
        console.log(this.$route.params.fid)
        console.log(this.$route.params.cid)
        this.gerCinema()
    },
    mounted(){
        mui('.mui-scroll-wrapper').scroll({
            deceleration:0.0005
        });
    },
    methods:{
        picFix(wh) {
            if (wh !== undefined) {
                return wh.replace("w.h", "110.150");
            }
        },
        gerCinema(){
            this.$http.get('cinemaDetail',{
                params:{
                    cinemaId:this.cinemaId,
                    movieId:this.filmId
                }
            }).then(result=>{
                console.log(result)
                this.cinemaDetail = result.body.cinemaData
                this.dealList = result.body.dealList
                this.showData = result.body.showData
                this.showData.movies.forEach((item,index)=>{
                    console.log(item)
                    this.filmList[item.id] = item
                    // console.log(item.id)
                })
                // this.filmList = this.filmList.concat(result.body.showData.movies)
                console.log(this.cinemaDetail)
                console.log(this.dealList)
                console.log(this.showData)
                console.log(this.filmList)
                this.$store.commit("changeTitle",this.cinemaDetail.nm);
                Indicator.close();
            })
        },
        getDetail(id){
            this.filmIndex = id
            console.log(this.filmIndex)
        }
    }
}
</script>
<style lang="scss" scoped>
*{
    touch-action: pan-x;
}
.cinema-container{
    .cinema{
        padding: 15px;
        h1{
            font-size: 18px;
        }
        span{
            font-size: 13px;
            color: rgb(124, 122, 122)
        }
    }
    .film{
        position: relative;
        left: 0;
        width: 100%;
        height: 188px;
        color: white;
        .movie-fliter {
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-color: rgb(189, 188, 188);
        }
        .img_bg {
            width: 100%;
            height: 80%;
            margin-top: 5%;
            z-index: -1;
            overflow: hidden;
            position: absolute;
            -webkit-filter: blur(1.5rem);
            filter: blur(1.5rem);
            background-size: cover;
            background-repeat: no-repeat;
            opacity: .55;
        }
        .film-img{
            height: 100%;
            display: flex;
            align-items: center;
            img{
                width: 100px;
                height: 120px;
            }
            .mui-active{
                border: 0;
                position: relative;
                width: 100px;
                height: 120px;
                border: 2px solid #fff;
                transform: scale(1.2);
                -webkit-transform: scale(1.2);
                // &::after {
                //     width: 0;
                //     height: 0;
                //     content: '';
                //     position: absolute;
                //     left: 50%;
                //     -webkit-transform: translateX(-50%);
                //     transform: translateX(-50%);
                //     bottom: -11px;
                //     z-index: 100;
                //     border: 5px solid transparent;
                //     border-top: 5px solid #fff;
                // }
            }
        }
        .mui-segmented-control.mui-scroll-wrapper {
            height: 100%;
        }
        .mui-segmented-control.mui-scroll-wrapper .mui-control-item{
            padding: 0;
            margin: 0 20px;
        }
    }
    .cinema-film{
        padding-top: 20px;
        .film-info{
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: rgb(255, 182, 57);
            .film-name{
                span:nth-child(1){
                    color: #000;
                    font-size: 18px;
                    font-weight: bold;
                }
                span:nth-child(2){
                    margin-left: 5px;
                    font-size: 18px;
                }
            }
            .film-desc{
                font-size: 13px;
                color: rgb(175, 175, 175);
            }
        }
    }
}
</style>
